<template>
    <div class="layout">
        <Layout v-if="signIn">
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <!--                    海南之家——和所有的快乐说BUYBUY！-->
                    <div class="layout-logo">
                        <Row>
                            <Col>
                                <p style="position: relative;color: white;font-size: xx-large;font-weight: bolder">海淘~</p>
                            </Col>
                            <Col>
                                <p style="position:relative;color: white">和所有的东西说buybuy</p>
                            </Col>
                        </Row>
                    </div>
                    <div class="layout-nav">
                        <MenuItem name="1" to="/ProductShow">
                            <Icon type="ios-navigate"></Icon>
                            主页
                        </MenuItem>
                        <MenuItem name="2" to="/AuctionCenter">
                            <Icon type="ios-keypad"></Icon>
                            拍卖
                        </MenuItem>
                        <MenuItem name="3" to="/BigSaleCenter">
                            <Icon type="ios-analytics"></Icon>
                            甩卖
                        </MenuItem>
                        <MenuItem name="4" to="/MessageCenter">
                            <Icon type="md-chatboxes"/>
                            消息
                        </MenuItem>
                        <MenuItem name="5" to="/PersonalCenter">
                            <Icon type="ios-paper"></Icon>
                            个人中心
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Content :style="{padding: '0 50px'}">
                <Card>
                    <router-view></router-view>
                </Card>
            </Content>
            <Footer class="layout-footer-center">杨海南制作</Footer>
        </Layout>
    </div>


</template>

<script>
    import globalData from "@/utils/globalData";

    export default {
        components: {},
        data() {
            return {
                signIn: false,
            }
        },
        created: function () {
            this.signIn = globalData.signInAlready
        },
        methods: {}
    }
</script>

<style scoped>
    .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }

    .layout-logo {
        /*width: 100px;*/
        /*height: 30px;*/
        /*background: #5b6270;*/
        /*border-radius: 3px;*/
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }

    .layout-nav {
        width: 620px;
        margin: 0 auto;
        margin-right: 20px;
    }

    .layout-footer-center {
        text-align: center;
    }
</style>